<template>
  <div>
    <el-input :placeholder="title" v-model="queryParams.keyword" clearable>
      <el-button slot="append" icon="el-icon-search" @click="showTab"></el-button>
    </el-input>
    <el-dialog :visible.sync="dialogVisible">
      <h2>{{ title }}</h2>
      <el-input v-model="queryParams.keyword" :placeholder="title" style="width: 50%" clearable/>
      <el-button @click="fetchData">查找</el-button>
      <DYTable :loading="loading" :table-fields="tableFields" :result="result" :allowCheck="allowCheck" :index="index"
               :params="params" @close="close" @send="handleMessage"></DYTable>
      <pagination
          :v_show="total > 0"
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="loadData"
      />
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "index",
  props: {
    title: String,
    url: Function,
    searchFields: String,
    tableFields: Array,
    allowCheck: String,
    index: String,
    params: String,
  },
  data() {
    return {
      items: [],
      dialogVisible: false,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        keyword: ''
      },
      total: 0,
      result: [],
      loading: false,
    }
  },
  methods: {
    loadData() {
      this.fetchData()
    },
    fetchData() {
      this.loading = true
      this.url(this.queryParams).then(resp => {
        this.result = resp.rows
        this.total = resp.total
        this.loading = false
      })

    },
    showTab() {
      this.dialogVisible = true
    },
    close() {
      this.dialogVisible = false;
    },
    handleMessage(text) {
      this.queryParams.keyword = text
    },
  }
}
</script>

<style scoped>

</style>
